<template>
  <div
    class="fixed right-0 top-[240px] bg-white wrapper rounded-[10px]"
    :style="{ right: show ? '0px' : '-200px' }"
  >
    <div
      class="fixed hide-wrapper right-[-20px] flex"
      @click="show = !show"
      :style="{ right: show ? '-40px' : '0px' }"
    >
      <div>{{ $t("rightFloat.显示") }}</div>
      <n-icon :size="20">
        <ChevronForward></ChevronForward>
      </n-icon>
    </div>
    <div
      @click="show = !show"
      class="p-2 bg-[--main-color] rounded-t-[6px] text-[white] flex items-center cursor-pointer"
    >
      <div>{{ $t("rightFloat.隐藏") }}</div>
      <n-icon class="w-[10px]" :size="16">
        <ChevronForward></ChevronForward>
      </n-icon>
    </div>
    <div class="text-center items">
      <div class="flex flex-col items-center gap-5 pt-4 pb-[22px] text-[#303030]">
        <div>
          <n-icon @click="onClickTo('/')">
            <HomeOutline></HomeOutline>
          </n-icon>
          <div>{{ $t("rightFloat.首页") }}</div>
        </div>
        <div class="relative">
          <n-icon @click="onClickTo('/cart')">
            <CartOutline></CartOutline>
            <n-badge
              class="absolute right-[-12px] top-[-5px]"
              style="font-style: normal"
              :value="cartCount"
            >
            </n-badge>
          </n-icon>

          <div>{{ $t("rightFloat.购物车") }}</div>
        </div>
        <div class="relative">
          <n-icon @click="onClickShowCompare">
            <Compare></Compare>
            <n-badge
              class="absolute right-[-12px] top-[-5px]"
              style="font-style: normal"
              :value="compareGoods.length"
            >
            </n-badge>
          </n-icon>

          <div>{{ $t("rightFloat.比价") }}</div>
        </div>
        <div>
          <n-icon @click="onClickTo('/uc/orderList')">
            <Report></Report>
          </n-icon>
          <div>{{ $t("rightFloat.订单") }}</div>
        </div>
        <div>
          <n-icon class="contact-wrapper">
            <LogoWhatsapp></LogoWhatsapp>
            <img src="/images/contact.png" class="absolute top-0 right-0 w-6 h-6" />
          </n-icon>
          <div>{{ $t("rightFloat.客服") }}</div>
        </div>
      </div>
    </div>

    <compareDialog ref="compareDialogRef"></compareDialog>
  </div>
</template>

<script setup>
import { ref, toRefs } from "vue";
import {
  HomeOutline,
  ChevronForward,
  CartOutline,
  LogoWhatsapp,
} from "@vicons/ionicons5";
import { Report, Compare } from "@vicons/carbon";
import { getUserShoppingCartItems } from "@/api/cart";
import bus from "@/utils/mitt";
import { getToken } from "@/utils/request";
import { useCompare } from "@/stores/compare";
import compareDialog from "@/components/compareDialog.vue";
const cartCount = ref(0);
const show = ref(true);
const { compareGoods } = toRefs(useCompare());
const compareDialogRef = ref(null);
onMounted(() => {
  bus.on("onUpdateCart", () => {
    loadCart();
  });
  loadCart();
});

const loadCart = async () => {
  if (getToken()) {
    const { data } = await getUserShoppingCartItems();
    cartCount.value = data.data.length;
  }
};
const onClickTo = (path) => {
  window.open(`/#${path}`, "_blank");
};

const onClickShowCompare = () => {
  compareDialogRef.value.show();
};
</script>

<style lang="scss" scoped>
.wrapper {
  border: 2px solid var(--main-color);
  transition: right 0.5s ease-in-out;
  .items {
    font-size: 28px;
    transition: height 0.5s ease-in-out;
    > div {
      > div {
        width: 100%;
        cursor: pointer;
        > div {
          font-size: 12px;
          margin-top: -14px;
          height: 0px;
          overflow: hidden;
          transition: height 0.3s ease-in-out;
        }
        &:hover {
          color: var(--main-color);
          > div {
            height: 20px;
          }
        }
      }
    }
  }
}

.hide-wrapper {
  writing-mode: vertical-lr; /* 文本竖向显示 */
  transform: rotate(180deg); /* 旋转180度，确保文本从上到下显示 */
  background-color: var(--main-color);
  color: white;
  padding: 10px 4px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  cursor: pointer;
  transition: right 0.5s ease-in-out;
}

.contact-wrapper {
  position: relative;
  img {
    position: absolute;
    width: 456px;
    height: 164px;
    right: 60px;
    top: -20px;
    display: none;
    transition: display 0.5s ease-in-out;
  }
  &:hover {
    img {
      display: block;
    }
  }
}
</style>
